<template>
  <view :class="['region-filter', { filter: filter }]">
    <template v-if="!activeStreetList.length">
      <scroll-view class="region-province" scroll-y="true">
        <view
          v-if="!limit"
          :class="['rp-item', { active: activeProvince === '' }]"
          @click="handleProvince(defaut)"
          >全国</view
        >
        <view
          :class="['rp-item', { active: item.value === activeProvince }]"
          v-for="(item, index) in region"
          :key="index"
          @click="handleProvince(item)"
          >{{ item.label }}</view
        >
      </scroll-view>
      <scroll-view class="region-city" scroll-y="true">
        <view
          :class="['rc-item', { active: item.value === activeCity }]"
          v-for="(item, index) in activeArea"
          :key="index"
          @click="handleCity(item, index)"
        >
          {{ item.label }}
          <u-icon
            name="checkbox-mark"
            size="32"
            v-if="item.value === activeCity"
          ></u-icon
        ></view>
      </scroll-view>
      <scroll-view
        class="region-final u-border-left u-border-left-d9"
        scroll-y="true"
        v-if="regionLevel == 3 && activeFinalList.length"
      >
        <view
          :class="['rf-item', { active: item.value === activeFinal }]"
          v-for="(item, index) in activeFinalList"
          :key="index"
          @click="handleFinal(item, index)"
        >
          {{ item.label }}
          <u-icon
            name="checkbox-mark"
            size="32"
            v-if="item.value === activeFinal"
          ></u-icon>
        </view>
      </scroll-view>
    </template>
    <template v-else>
      <view class="street-wrap">
        <scroll-view class="street-list" scroll-y="true">
          <view
            :class="[
              'street-item u-border-bottom',
              { active: item.value === activeStreet },
            ]"
            v-for="(item, index) in activeStreetList"
            :key="index"
            @click="handleStreet(item, index)"
          >
            {{ item.label }}
            <u-icon
              name="checkbox-mark"
              size="32"
              v-if="item.value === activeStreet"
            ></u-icon>
          </view>
        </scroll-view>
        <u-button
          :hair-line="false"
          :custom-style="customStyle"
          class="return-btn"
          @click="activeStreetList = []"
          >返回</u-button
        >
      </view>
    </template>
  </view>
</template>

<script>
import regionLimit from "@/utils/regionLimit";
import { getFileByUrl } from "@/api/index";
import { insertDefault } from "@/utils/handle";
export default {
  props: {
    formData: [String, Number],
    propList: [Array, String],
    limit: {
      type: Boolean,
      defaut: false,
    },
    filter: Boolean,
  },
  data() {
    return {
      // region,
      regionNoLimit: [],
      regionLimit,
      activeProvince: "",
      activeProvinceName: "",
      activeCity: "",
      activeCityName: "",
      activeFinal: "",
      activeFinalName: "",
      activeStreet: "",
      activeStreetName: "",
      activeArea: [],
      activeFinalList: [],
      activeStreetList: [],
      defaut: {
        value: "",
        label: "全国",
      },
      hotRegion: [
        "111000",
        "310000",
        "120000",
        "500000",
        "440100",
        "440300",
        "420100",
        "320100",
        "330100",
        "510100",
        "610100",
      ],
      regionLevel: this.$regionLevel,
      customStyle: {
        backgroundColor: "#E9ECEF",
        border: "none",
        color: "#555555",
      },
    };
  },
  computed: {
    region() {
      if (this.limit) {
        this.activeProvince = "000000";
        this.activeArea = JSON.parse(JSON.stringify(this.regionLimit.children));
        return [this.regionLimit, ...this.regionNoLimit];
      } else {
        return this.regionNoLimit;
      }
    },
  },
  watch: {
    formData: {
      handler(region) {
        if (region && region !== "0") {
          let provinceId = region.slice(0, 2) + "0000";
          let province = this.region.find((ele) => ele.value === provinceId);
          this.activeProvince = provinceId;
          this.activeProvinceName = province.label;

          this.activeArea = JSON.parse(JSON.stringify(province.children));
          let cityId = region.slice(0, 4) + "00";
          let activeCity = this.activeArea.find((ele) => ele.value === cityId);
          this.activeCityName = activeCity ? activeCity.label : "";
          this.activeCity = cityId;

          let activeFinal = {};
          if (activeCity && activeCity.children) {
            this.activeFinalList = JSON.parse(
              JSON.stringify(activeCity.children)
            );
            let sectId = region.slice(0, 6);
            activeFinal = this.activeFinalList.find(
              (ele) => ele.value === sectId
            );
            this.activeFinalName = activeFinal ? activeFinal.label : "";
            this.activeFinal = sectId;
          }

          if (region.length > 6 && activeFinal && activeFinal.children) {
            this.activeStreetList = JSON.parse(
              JSON.stringify(activeFinal.children)
            );
            let activeStreet = this.activeStreetList.find(
              (ele) => ele.value === region
            );
            this.activeFinalName = activeStreet ? activeStreet.label : "";
            this.activeStreet = region;
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    getFileByUrl('https://img3.job1001.com/ypMp/elan/files/region.min.json').then(res => {
      this.regionNoLimit = insertDefault(res)
    })
  },
  methods: {
    handleProvince(item) {
      this.activeProvince = item.value;
      this.activeProvinceName = item.label === "热门城市" ? "" : item.label;
      this.activeArea = [];
      this.activeFinalList = [];
      this.activeStreetList = [];
      if (item.children && item.children.length) {
        this.activeArea = JSON.parse(JSON.stringify(item.children));
      } else {
        this.$emit("confirm", [item.value, item.label], this.propList);
      }
    },
    handleCity(item, index) {
      this.activeCity = item.value;
      this.activeCityName = item.label === "不限" ? "" : item.label;
      this.activeFinalList = [];
      this.activeStreetList = [];
      if (item.children && item.children.length) {
        this.activeFinalList = JSON.parse(JSON.stringify(item.children));
      } else {
        let name = index ? this.activeCityName : this.activeProvinceName;
        if (this.limit && this.activeProvinceName) {
          name =
            this.activeProvinceName +
            (this.activeCityName ? " - " + this.activeCityName : "");
        } else if (this.limit && this.activeCityName) {
          name = this.activeCityName;
        }
        this.$emit("confirm", [item.value, name], this.propList);
      }
    },
    handleFinal(item, index) {
      this.activeFinal = item.value;
      this.activeFinalName = item.label === "不限" ? "" : item.label;
      this.activeStreetList = [];
      if (item.children && item.children.length) {
        this.activeStreetList = JSON.parse(JSON.stringify(item.children));
      } else {
        let name = index ? this.activeFinalName : this.activeCityName;
        if (this.limit && this.activeProvinceName && this.activeCityName) {
          name =
            this.activeProvinceName +
            " - " +
            this.activeCityName +
            (this.activeFinalName ? " - " + this.activeFinalName : "");
        } else if (this.limit && this.activeFinalName) {
          name = this.activeFinalName;
        }
        this.$emit("confirm", [item.value, name], this.propList);
      }
    },
    handleStreet(item, index) {
      this.activeStreet = item.value;
      this.activeStreetName = item.label === "不限" ? "" : item.label;
      let name = index ? this.activeStreetName : this.activeFinalName;
      if (
        this.limit &&
        this.activeProvinceName &&
        this.activeCityName &&
        this.activeFinalName
      ) {
        name =
          this.activeProvinceName +
          " - " +
          this.activeCityName +
          " - " +
          this.activeFinalName +
          (this.activeStreetName ? " - " + this.activeStreetName : "");
      } else if (this.limit && this.activeStreetName) {
        name = this.activeStreetName;
      }
      this.$emit("confirm", [item.value, name], this.propList);
    },
  },
};
</script>

<style lang="scss">
.region-filter {
  display: flex;
  height: 100%;
  background: $uni-bg-color;
  .region-province {
    flex-shrink: 0;
    padding: 20rpx 0 20rpx 24rpx;
    width: 27%;
    max-height: 100%;
    overflow: auto;
    background: $uni-bg-color-grey;
    .rp-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      border-radius: 16rpx 0 0 16rpx;
      &.active {
        background: $uni-bg-color;
      }
    }
  }
  .region-city {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .rc-item {
      padding: 24rpx 44rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
  .region-final {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .rf-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
  .street-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 60vh;
    .street-list {
      flex-grow: 1;
      overflow: auto;
    }
    .street-item {
      padding: 26rpx 32rpx;
      font-size: $uni-font-size-base;
      line-height: 54rpx;
      color: $uni-text-color-555;
      box-sizing: border-box;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
    .return-btn {
      flex-shrink: 0;
      margin: 24rpx 32rpx;
    }
  }
  &.filter {
    max-height: calc(60vh - 128rpx);
  }
}
</style>
